<template>
  <div class="app-container">
    <div class="topBtn">
      <!-- <el-button v-if="processed === false && approvalStatus == '归档'" size="mini" type="info" icon="el-icon-printer"  @click="printClick()">打印</el-button> -->
      <el-button size="mini" icon="el-icon-back" @click="returnGo">返 回</el-button>
    </div>
    <div v-loading="formLoading">
    <!-- <el-card> -->
      <KJ :formData="formData" v-if="showForm && formType == 'A' && (projectName == '跨境电子商务出口统一版系统（上海关区）' || projectName == '跨境电子商务进口统一版系统（上海关区）')" :record="record"></KJ>
      <DT :formData="formData" v-if="showForm && formType == 'D'" :record="record"></DT>
      <TS :formData="formData" v-if="showForm && formType == 'A' && (projectName != '跨境电子商务出口统一版系统（上海关区）' && projectName != '跨境电子商务进口统一版系统（上海关区）')"    :record="record"></TS>
      <CD :formData="formData" v-if="showForm && formType == 'B'" :record="record"></CD>
      <VPN :formData="formData" v-if="showForm && formType == 'E'" :record="record"></VPN>
      <BG :formData="formData" v-if="showForm && formType == 'F'" :record="record"></BG>
      <GM :formData="formData" v-if="showForm && formType == 'G'" :record="record"></GM>
      <DZXX :formData="formData" v-if="showForm && formType == 'H'" :record="record"></DZXX>
      <ZX :formData="formData" v-if="showForm && formType == 'S'" :record="record"></ZX>
      <JR :formData="formData" v-if="showForm && formType == 'J'" :record="record"></JR>
      <XT :formData="formData" v-if="showForm && formType == 'N'" :record="record"></XT>
    <!-- </el-card> -->
    <el-divider></el-divider>
    <el-tabs v-if="showForm" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="流转记录" name="first">
      <div>
      <p v-for="(item,index) in checkList" :key="index">
        <span class="textCZ">{{index + 1}}、操作人：<strong>{{ item.CZR }}</strong></span>
        <span class="textCZ">操作内容：<strong>{{ item.CZNR }}</strong></span>
        <span class="textCZ">操作节点审核：<strong>{{ item.NAME }}</strong></span>
        <span class="textCZ">操作时间：<strong>{{ item.CZSJ }}</strong></span>
      </p>
    </div>
    </el-tab-pane>
    <el-tab-pane v-if="fileList != null && fileList.length > 0" label="查看已上传" name="fileList">
      <div class="app-container">
        <el-table :data="fileList">
          <!-- <el-table-column label="序号"  type="index" width="55" align="center" /> -->
          <el-table-column label="图片名称"  align="center" prop="FILENAME">
            <template slot-scope="scope">
              <el-link type="primary" @click="seeImg(scope.row)">{{scope.row.FILENAME}}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="文件名" align="center" prop="FILECONFIGNAME" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="文件宽高"  align="center" width="200">
            <template slot-scope="scope">
              <span type="primary">{{scope.row.WIDTH}}</span>/<span type="primary">{{scope.row.HEIGHT}}</span>
            </template>
          </el-table-column>
          <el-table-column label="文件类型" align="center" prop="applytime" width="150">
            <template slot-scope="scope">
              <span>{{ suffix(scope.row.FILENAME) }}</span>
            </template>
          </el-table-column>
      </el-table>
        <!-- <pagination
        v-show="totalHistory>0"
        :total="totalHistory"
        :page.sync="queryParamsHistory.pageNum"
        :limit.sync="queryParamsHistory.pageSize"
        @pagination="getQYhisList"
      /> -->
      </div>
      <!-- <div class="fileBtn">
        <el-button size="mini" round @click="rotate('left')">左旋转90°</el-button>
        <el-button size="mini" round @click="rotate('right')">右旋转90°</el-button>
      </div>
      <div class="fileBox" ref="fileBox" @mousewheel.prevent="rollImg" :style="{height:imageStyle.fileImgHeight}">
          <img class="img" ref="imgDiv" @mousedown="move" :style="imageStyle" :src="imgURL" alt="">
        
      </div> -->
    </el-tab-pane>
    <el-tab-pane v-if="projectName == 'VPN接入申请'" label="打印合同书" name="printVpn">
      <div id="printBox">
        <img :src="barCode" width="230px"  height="150px"/>
        <div class="Print_title">
          <h2>上海电子口岸VPN网络接入协议书</h2>
          <br/>
        </div>
        <h3><strong>甲 方：</strong></h3>
        <h3><strong>地 址：</strong></h3>
        <h3><strong>联系电话：</strong></h3>
        <h3><strong>传 真：</strong></h3>
        <br />
        <h3><strong>乙 方： 上海亿通国际股份有限公司</strong></h3>
        <h3><strong>地 址： 上海市浦东新区博霞路185号</strong></h3>
        <h3><strong>联系电话： （021）- 20260039</strong></h3>
        <h3><strong>传 真： （021）- 20260020</strong></h3>
        <div class="test_p">
          <p>甲、⼄双⽅经友好协商，就甲⽅使⽤⼄⽅提供的上海电⼦⼝岸VPN⽹络接⼊服务有关事宜达成⼀致。根据《中华⼈⺠共和国合同法》及其他法律法规签订本协议，并由双⽅共同恪守。条款如下：</p>
        </div>
      <h3><strong>⼀、 服务内容</strong></h3>
      <div class="test_p">
          <p>甲⽅通过使⽤⼄⽅提供的上海电⼦⼝岸VPN⽹络接⼊⼯具软件实现与上海电⼦⼝岸VPN⽹络的连接，应⽤上海电⼦⼝岸相关系统。</p>
        </div>
        <h3><strong>⼆、 协议价款</strong></h3>
      <div class="test_p">
          <p>甲⽅享受⼄⽅所提供的VPN⽹络接⼊服务，按照《上海电⼦⼝岸VPN⽹络接⼊管理办法》规定的收费标准，每⽉向⼄⽅⽀付VPN使⽤费。</p>
          <p>（⼀）甲⽅使⽤：</p>
          <p>VPN⽤户名： <ins>{{PrintTitle}}</ins> 申请开通</p>
          <p><ins>&nbsp;&nbsp;{{PrintName}}&nbsp;&nbsp;</ins>权限</p>
          <p>共计VPN账号 <ins>&nbsp;&nbsp;1&nbsp;&nbsp;</ins> 个。</p>
          <p>收费标准 <ins>&nbsp;&nbsp;{{price}}&nbsp;&nbsp;</ins> 元/⽉.客户端。</p>
          <p v-if="price == 100">每⽉使⽤费合计： <ins>&nbsp;&nbsp;100&nbsp;&nbsp;</ins> 元（⼤写：⼈⺠币壹佰 元整）。</p>
          <p v-if="price == 200">每⽉使⽤费合计： <ins>&nbsp;&nbsp;200&nbsp;&nbsp;</ins> 元（⼤写：⼈⺠币贰佰 元整）。</p>
          <p v-if="price == 300">每⽉使⽤费合计： <ins>&nbsp;&nbsp;300&nbsp;&nbsp;</ins> 元（⼤写：⼈⺠币叁佰 元整）。</p>
        </div>
        <h3><strong>三、 协议履⾏⽅式</strong></h3>
      <div class="test_p">
          <p>(⼀) 甲⽅按照《上海电⼦⼝岸VPN⽹络接⼊管理办法》有关规定向中国电⼦⼝岸数据中⼼上海分中⼼（以下简称“数据分中⼼”）递交《上海电⼦⼝岸VPN接⼊申请使⽤登记表》，经数据分中⼼核对有关信息并签注意⻅后，由数据分中⼼通知⼄⽅为甲⽅开通VPN帐号，甲⼄双⽅同时签订本协议，由甲⽅⾃⾏完成VPN客户端安装。</p>
          <p>(⼆) VPN使⽤费从⼄⽅帐号开通的下⽉起计收，并以上海电⼦⼝岸⻔户⽹站上所公布的帐号开通时间为帐号开通⽇。甲⽅按⾃然季度根据本协议确定的VPN⽉使⽤费的标准向⼄⽅⽀付费⽤。⼄⽅每季度第⼀个⽉10⽇前以挂号信⽅式向甲⽅提供上季度费⽤发票（遇国定节假⽇相应向后顺延）。</p>
          <p>(三) 甲⽅收到费⽤帐单后应于当⽉20⽇之前向⼄⽅⽀付上季度费⽤（遇国定节假⽇相应向后顺延）。</p>
          <p>(四) ⼄⽅于缴费截⽌⽇未收到甲⽅⽀付的上季度费⽤时，将向甲⽅催款，若当⽉底还未收到款项，将在向数据分中⼼报备的基础上，于下⽉第⼀个⼯作⽇起暂停甲⽅使⽤VPN接⼊端⼝进⾏数据传输等操作的权限。甲⽅若需恢复使⽤权限，除补交拖⽋款项外，还需按照《上海电⼦⼝岸VPN⽹络接⼊管理办法》有关规定，⽀付VPN帐号开通费（每个帐号开通费为⼈⺠币贰佰元）。</p>
          <p>(五) 甲⽅在使⽤过程中应严格遵守《上海电⼦⼝岸VPN⽹络接⼊管理办法》，否则由此造成的⼀切后果，由甲⽅负责。</p>
        </div>
        <h3><strong>四、 保密条款</strong></h3>
      <div class="test_p">
          <p>保密信息系指关系到双⽅和相关其它⽅⽬前和未来发展的不可向外界披露的商业和经营策略、海关执法信息等,知悉对⽅保密信息的⼀⽅仅可以将该保密信息⽤于履⾏本协议项下的义务。获取对⽅保密信息的⼀⽅应当采取适当有效的措施保护所知悉的保密信息，以防⽌保密信息未经授权⽽被使⽤、传播或公开。</p>
          <p>上述保密义务不适⽤以下情况：</p>
          <p>1、 对⽅书⾯授权许可；</p>
          <p>2、 对⽅书⾯确认不再是保密信息；</p>
          <p>3、 法定强制披露。</p>
        </div>
        <h3><strong>五、 知识产权</strong></h3>
      <div class="test_p">
          <p>⼄⽅拥有VPN⽹络接⼊软件的知识产权。甲⽅不得以任何⽅式将⼄⽅的任何技术秘密（包括但不限于：协议、技术⽅案、⼯程设计、数据库、技术资料、表单、演示⽂件等）透露给其它⽅，否则须承担由此给⼄⽅以及海关带来的全部损失。</p>
          <p>⼄⽅应遵循相应职业道德进⾏严格保密，不将甲⽅的任何业务数据（包括但不限于：协议、数据库、业务数据、相关函电、内部系统信息等）透露给除甲⽅使⽤的上海电⼦⼝岸应⽤项⽬涉及的有关管理部⻔外的其它⽅。</p>
        </div>
        <h3><strong>六、 其他责任和义务</strong></h3>
        <h3><strong>&nbsp;（⼀）甲⽅的责任和义务</strong></h3>
      <div class="test_p">
          <p>1、 根据要求准备好系统实施环境（含硬件和⽹络设置）。因甲⽅原因引起的实施延迟由甲⽅承担相应责任。</p>
          <p>2、 严格按照VPN⽹络接⼊服务使⽤须知使⽤，对⾃⾏操作违背海关正常业务流程规范的⾏为及后果承担相应责任。</p>
          <p>3、 严谨操作，对⾮正常操作引起的数据差异和软件应⽤异常承担相应责任。</p>
          <p>4、 遵守国家有关法律法规。</p>
        </div>
        <h3><strong>&nbsp;（⼆）⼄⽅的责任和义务</strong></h3>
      <div class="test_p">
          <p>1、 按照本协议服务内容提供软件产品和信息服务。</p>
          <p>2、 负责VPN升级和维护服务。</p>
          <p>3、 负责免费修正软件本身存在的技术问题。</p>
        </div>
        <h3><strong>七、 不可抗力</strong></h3>
        <div class="test_p">
          <p>由于地震、台⻛、⽔灾、⽕灾、战争、政府政策变更以及其他不能预⻅并对其发⽣和后果不能预防、不能克服或避免的不可抗⼒直接影响本协议的履⾏或者导致双⽅不能按照约定履⾏协议，遇有不可抗⼒的⼀⽅可以免除相关协议责任。但是遇有不可抗⼒的⼀⽅应⽴即书⾯通知对⽅，并在15天之内提供上述不可抗⼒的详细情况及协议不能履⾏或者部分不能履⾏或者需要延期履⾏的理由和有效的证明⽂件。按照不可抗⼒对履⾏协议影响的程度，由双⽅协商决定是否解除协议，或者部分免除履⾏协议的义务，或者延期履⾏协议。⼀⽅迟延履⾏本协议时发⽣了不可抗⼒的，迟延⽅的协议义务不能免除。</p>
          <p>受不可抗⼒影响的⼀⽅，应当尽可能采取合理的⾏为和适当的措施减轻不可抗⼒对履⾏本协议所造成的影响。没有采取适当措施致使损失扩⼤的，该⽅不得就扩⼤损失的部分要求免责或赔偿。</p>
        </div>
        <h3><strong>⼋、 违约</strong></h3>
        <div class="test_p">
          <p>如果任何⼀⽅未按本协议规定履⾏义务，其他⽅有权暂停协议履⾏，要求违约⽅补偿和采取补救措施，并继续履⾏本协议所规定的义务。</p>
          <p>任何⼀⽅违反本协议所规定的保密义务，违约⽅应当承担因此给对⽅造成的全部损失。</p>
          <p>如果发⽣违约事件，履约⽅应当以书⾯⽅式通知违约⽅，内容包括违约事件、⽅式、赔偿⾦额等。违约⽅在收到上述通知后，应当于10天内答复履约⽅。如果不能就此达成⼀致意⻅，可以按照本协议所规定的争议解决条款解决纠纷。</p>
        </div>
        <h3><strong>九、 争议解决</strong></h3>
        <div class="test_p">
          <p>如果双⽅在履⾏本协议过程中发⽣争议，⾸先应当采取友好协商的⽅式解决该争议，友好协商解决期为争议发⽣后的30天内。如果超过且协商不成的，双⽅同意按下列⽅式予以解决：</p>
          <p>1、 向上海仲裁委员会提起仲裁；</p>
          <p>2、 向⼈⺠法院提请诉讼；</p>
          <p>3、 即使提出争议仲裁或向⼈⺠法院提请诉讼，除争议事项或诉讼事项所涉及的条款外，双⽅应继续履⾏本协议项下的其它义务。</p>
        </div>
        <h3><strong>⼗、 协议终⽌</strong></h3>
        <div class="test_p">
          <p>如果发⽣以下情况，任何⼀⽅有权终⽌本协议，但是须在5个⼯作⽇内以书⾯⽅式通知其它⽅：</p>
          <p>1、 ⼀⽅进⼊破产、解散、被依法关闭、撤销或已进⼊清算阶段；</p>
          <p>2、 ⼀⽅财务状况严重恶化，不能⽀付到期债务；</p>
          <p>3、 出现了协议规定的或法定解除事由。</p>
        </div>
        <h3><strong>⼗⼀、 协议⽣效</strong></h3>
        <div class="test_p">
          <p>本协议未尽事宜经双⽅协商⼀致后可签订补充协议（或增加补充条款），以便对本协议中的有关问题做出补充、说明、解释。本协议的补充条款和补充协议为其不可分割的⼀部分，与本协议具有同等的法律效⼒。</p>
          <p>本协议壹式叁份，双⽅各执壹份；另外壹份交数据分中⼼备案。</p>
          <p>本协议双⽅签字盖章后⽴即⽣效，有效期为⼀年。协议期满前2个⽉内，任何⼀⽅未向其它⽅书⾯提出终⽌协议的，则本协议⾃动延⻓⼀年，延⻓次数不限。</p>
        </div>
        <br />
        <div class="bottom_qianzhang">
          <div>
            <h3><strong>甲方：</strong></h3>
            <h3><strong>代表人： （签章）</strong></h3>
            <h3><strong><span style="margin-left: 55px;">年</span><span style="margin-left: 20px;">月</span><span style="margin-left: 20px;">日</span></strong></h3>
          </div>
          <div>
            <h3><strong>乙方： 上海亿通国际股份有限公司</strong></h3>
            <h3><strong>代表人： （签章）</strong></h3>
            <h3><strong><span style="margin-left: 55px;">年</span><span style="margin-left: 20px;">月</span><span style="margin-left: 20px;">日</span></strong></h3>
          </div>
        </div>
      </div>
      <div style=" text-align: center;margin: 20px 0;">
        <el-button type="info" v-print="printId">打印合同书</el-button>
      </div>
      
    </el-tab-pane>
    <el-tab-pane v-if="deal.data != null && deal.data.length > 0" label="业务处理信息" name="second">
      <el-form label-width="80px">
        <div v-for="(item,index) in deal.data" :key="index">
          <el-form-item :label="item.NAME">
          <el-input
            :readonly="true"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="item.VALUE">
          </el-input>
        </el-form-item>
        </div>
        
      </el-form>
      
    </el-tab-pane>
    <el-tab-pane v-if="(deal.data != null && deal.data.length > 0) && PDshow == true" label="派单信息" name="pdxx">
      <el-form label-width="80px" size="mini">
          <el-row :gutter="24" style="width:50%">
            <el-col :span="24">
               <el-form-item label="派单公司">
                <el-input :readonly="true" v-model="record.PDGS"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="备注">
                <el-input :readonly="true" type="textarea" v-model="pdBZ"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
    </el-tab-pane>
     <el-tab-pane v-if="dealFzx.data != null && dealFzx.data.length > 0" label="分中心处理信息" name="third">
      <el-form label-width="80px">
        <div v-for="(item,index) in dealFzx.data" :key="index">
          <el-form-item v-if="item.NAME == 'DXP-ID：'" :label="item.NAME">
          <el-input
            :readonly="true"
            placeholder="请输入内容"
            v-model="item.VALUE">
          </el-input>
        </el-form-item>
          <el-form-item v-else :label="item.NAME">
          <el-input
            :readonly="true"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="item.VALUE">
          </el-input>
        </el-form-item>
        </div>
        
      </el-form>
      
    </el-tab-pane>
    <el-tab-pane label="外部回复信息" name="revert" v-if="revertForm">
      <div style="width:75%;margin: 0 auto;text-align: center;">
        <h3>基本情况</h3>
        <el-form :model="revertForm" label-width="80px" size="mini">
          <el-row :gutter="24">
            <el-col :span="12">
               <el-form-item label="客户单位">
                <el-input :readonly="true" v-model="revertForm.KHDW"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="联系人">
                <el-input :readonly="true" v-model="revertForm.LXR"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="通讯地址">
                <el-input :readonly="true" v-model="revertForm.TXDZ"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="联系电话">
                <el-input :readonly="true" v-model="revertForm.LXDH"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="传真电话">
                <el-input :readonly="true" v-model="revertForm.CZDH"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="邮编">
                <el-input :readonly="true" v-model="revertForm.YB"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="批准安装">
                <el-input :readonly="true" v-model="revertForm.PZAZSJ"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="服务方式">
                <el-radio-group class="readonly-radio-group" v-model="revertForm.FWFS">
                  <el-radio label="0">上门服务</el-radio>
                  <el-radio label="1">客户送装</el-radio>
                  <el-radio label="2">邮件</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
           <el-row :gutter="24">
              <el-col :span="12">
               <el-form-item label="联系日期">
                <el-input :readonly="true" v-model="revertForm.DDXCSJ"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="安装日期">
                <el-input :readonly="true" v-model="revertForm.AZWCSJ"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="projectName == 'VPN接入申请'">
               <el-form-item label="用户邮箱">
                <el-input :readonly="true" v-model="revertForm.YHYX"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="deal.data != null && deal.data.length > 0">
               <el-form-item label="备注">
                <el-input :readonly="true" v-model="revertForm.WBBZ"></el-input>
              </el-form-item>
            </el-col>
            </el-row>
            <h3>安装情况</h3>
            <el-row :gutter="24">
              <el-col>
                <el-form-item label="安装过程中遇到的情况及处理办法和结果" label-width="180px">
                  <el-input :readonly="true" type="textarea" v-model="revertForm.AZQK"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane v-if="record.GLID" label="关联系统信息" name="glxx">
      <KJ :formData="glformData" v-if="glShowForm && (glprojectName == '跨境电子商务出口统一版系统（上海关区）' || glprojectName == '跨境电子商务进口统一版系统（上海关区）')" :record="glrecord"></KJ>
      <DT :formData="glformData" v-if="glShowForm && glformType == 'D'" :record="glrecord"></DT>
      <TS :formData="glformData" v-if="glShowForm && glformType == 'A'&& (projectName != '跨境电子商务出口统一版系统（上海关区）' && projectName != '跨境电子商务进口统一版系统（上海关区）')" :record="glrecord"></TS>
      <CD :formData="glformData" v-if="glShowForm && glformType == 'B'" :record="glrecord"></CD>
      <VPN :formData="glformData" v-if="glShowForm && glformType == 'E'" :record="glrecord"></VPN>
      <BG :formData="glformData" v-if="glShowForm && glformType == 'F'" :record="glrecord"></BG>
      <GM :formData="glformData" v-if="glShowForm && glformType == 'G'" :record="glrecord"></GM>
      <DZXX :formData="glformData" v-if="glShowForm && glformType == 'H'" :record="glrecord"></DZXX>
      <ZX :formData="glformData" v-if="glShowForm && glformType == 'S'" :record="glrecord"></ZX>
       <JR :formData="glformData" v-if="glShowForm && glformType == 'J'" :record="glrecord"></JR>
      <XT :formData="glformData" v-if="glShowForm && glformType == 'N'" :record="glrecord"></XT>
    </el-tab-pane>
    <el-tab-pane label="企业历史列表" name="fourth">
      <div class="app-container">
        <el-table v-loading="historyLoading" :data="QYhsiList">
          <!-- <el-table-column label="序号"  type="index" width="55" align="center" /> -->
          <el-table-column label="申请编号"  align="center" prop="lsh" width="150">
            <template slot-scope="scope">
              <el-link type="primary" @click="handleFlowRecord(scope.row)">{{scope.row.lsh}}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="应用项目" align="center" prop="xmmc" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="企业名称"  prop="qymc" align="center" >
          </el-table-column>
          <el-table-column label="申请日期" align="center" sortable prop="applytime" width="220" />
      </el-table>
        <pagination
        v-show="totalHistory>0"
        :total="totalHistory"
        :page.sync="queryParamsHistory.pageNum"
        :limit.sync="queryParamsHistory.pageSize"
        @pagination="getQYhisList"
      />
      </div>
    </el-tab-pane>
    <!-- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
  </el-tabs>
    </div>
  </div>
</template>

<script>
import {historydetailData,getCompanyList,glDetail,getGen} from '@/api/businessModule/historicalData.js'
import KJ from './formboard/KJ'
import VPN from './formboard/Vpn'
import DT from './formboard/DT'
import ZX from './formboard/ZX'
import TS from './formboard/TS'
import CD from './formboard/CD'
import BG from './formboard/BG'
import GM from './formboard/GM'
import DZXX from './formboard/DZXX'
import JR from './formboard/JR'
import XT from './formboard/XT'
export default {
  // name: 'historyDetail',
  components: {
    KJ,
    VPN,
    DT,
    ZX,
    TS,
    CD,
    BG,
    GM,
    DZXX,
    JR,
    XT
  },
  data() {
    return {
      // 遮罩层
      formLoading:true,
      // 附件路径
      imgURL: '',
      // 旋转角度
      deg: 0,
      // 图片样式
      imageStyle: {
        //附件宽度
      fileImgWidth: 500,
      //附件高度
      fileImgHeight:500, 
      },
      // 关联的数据
      // 标签页
      activeName: 'first',
      // 表单显示
      showForm: false,
      // 关联表单显示
      glShowForm:false,
      // 项目名称
      projectName:null,
      // 申请编号
      lsh: null,
      // 表单类型
      formType:null,
      // 表单数据
      formData: {},
      // 基本信息
      record: {},
      // 关联项目名称
      glprojectName:null,
      // 关联表单类型
      glformType:null,
      // 关联表单类型
      glformData: {},
      // 关联基本信息
      glrecord:{},
      // 上传的附件
      fileList:[],
      // 审核记录
      checkList: [],
      // 业务处理信息
      deal: null,
      // 分中心处理意见
      dealFzx:null,
      // 企业历史数据
      QYhsiList: [],
      // 历史记录表遮罩层
      historyLoading: true,
      // 历史总条数
      totalHistory:0,
      // 历史记录查询条件
      queryParamsHistory: {
        pageNum: 1,
        pageSize: 10,
        // 流程ID
        id:null,
      },
      // 条形码
      barCode: '',
      ratesList100: [
        '进出境运输工具动态申报系统(海运)',
        '进出境运输工具动态申报系统(空运)',
        '进出境运输工具舱单由报系统(海运)',
        '进出境运输工具舱单由报系统(空运)',
        '展览品管理系统(单一窗口）',
        '中国 (上海)自由贸易试验区信息化系统'
      ],
      ratesList200: [
        '海关放行电子信息接收系统(空运)',
        '海关放行电子信息接收系统(海运)',
        '特殊区域 (保税仓储联网)信息化管理系统',
        '特殊区域货物管理系统',
        '钻交所海关特殊区域信息化管理系统',
        '特殊监管区域 (H帐册联网)信息化管理系统',
        '加工贸易联网监管 (E帐册) 辅助管理模块 （二期 )',
        '特殊区域 (先进区、后报关) 信息化系统',
        '特殊区域(保税展示交易)信息化系统',
        '特殊区域(维修、检测帐册联网) 信息化管理系统',
      ],
      ratesList300: [
        '自贸区空运“先进区、后报关”进口货物电子提货通知书接收系统',
        '出口新造集装箱及堆场管理系统',
        '快件KJ类随附单证电子化传输系统',
      ],
      // 价格
      price: null,
      // 应用系统登录用户名称
      PrintTitle: null,
      // 合同书项目名称
      PrintName: null,
      // 打印绑定对象
      printId: {
        id: 'printBox',
        openCallback(vue) { },
        closeCallback(vue) { }
      },
      // 外部回复信息
      revertForm: {
        YHYX: null,
        WBBZ:null,
      },
      // 派工单是否显示
      PDshow: false,
      // 派工单备注
      pdBZ: null,
      // 后缀名
      newSuffName:null,
    
  }
  },
  watch: {
    $route: {
      handler(val, oldVal) {
        // 监听路由传参界面不变化的问题
        if (val.query.lsh != oldVal.query.lsh) {
          this.initData()
        }
      },
      deep:true
    }
  },
  activated() {
    this.initData()
  },
  created() {
    this.initData()
  },
  methods: {
    // 查看图片
    seeImg(row) {
      const suffixName = row.FILENAME.substring(row.FILENAME.lastIndexOf('.') + 1)
      if (suffixName == 'jpg') {
        this.newSuffName = 'jpeg'
      } else {
        this.newSuffName = suffixName
      }
      const strss = `data:image/${this.newSuffName};base64,` + row.FILECONTENT
      this.imgURL = strss.replace(/[\r\n]/g, "")
      const newWindow = window.open('', '_blank');
       const newWindowContent = `
        <html>
          <head>
            <style>
              html, body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
              }
              #image-container {
                position: relative;
                width: 100%;
                height: 100%;
              }
              #image {
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                transform-origin: center;
                transition: transform 0.3s ease;
              }
              .rotate-buttons {
                position: absolute;
                top: 10px;
                z-index: 1;
              }
              .rotate-buttons button {
                margin-right: 10px;
              }
            </style>
          </head>
          <body>
            <div id="image-container">
              <img id="image" src="${this.imgURL}" alt="展示图片">
              <div class="rotate-buttons">
                <button onclick="rotateLeft()">左旋转</button>
                <button onclick="rotateRight()">右旋转</button>
              </div>
            </div>
    
            <script>
              let rotationAngle = 0;
              let scaleValue = 1;
              let isMouseDown = false;
              let originalWidth;
              let originalHeight;
              let startX = 0;
              let startY = 0;
              let draggedX = 0;
              let draggedY = 0;
              let scale = 1;
              const scaleStep = 0.2;
              
              const imageContainer = document.getElementById('image-container');
              const image = document.getElementById('image');
               image.onload = function() {
                originalWidth = image.width;
                originalHeight = image.height;
              };
              function rotateLeft() {
                rotationAngle -= 90;
                applyTransform();
              }
              
              function rotateRight() {
                rotationAngle += 90;
                applyTransform();
              }
               function applyTransform() {
                 const transformValue = 'rotate(' + rotationAngle + 'deg) scale(' + scaleValue + ')';
                image.style.transform = transformValue;
              }
              
              imageContainer.addEventListener('mousedown', function(event) {
                if (event.button === 0) {
                  isMouseDown = true;
                  startX = event.clientX;
                  startY = event.clientY;
                  event.preventDefault(); // 防止鼠标按下时选中图片的内容
                }
              });
        
              document.addEventListener('mousemove', function(event) {
                if (isMouseDown) {
                  const offsetX = event.clientX - startX;
                  const offsetY = event.clientY - startY;
                  draggedX += offsetX;
                  draggedY += offsetY;
                  startX = event.clientX;
                  startY = event.clientY;
                  image.style.left = draggedX + 'px';
                  image.style.top = draggedY + 'px';
                }
              });
        
              document.addEventListener('mouseup', function(event) {
                if (event.button === 0) {
                  isMouseDown = false;
                }
              });
    
              function handleWheel(event) {
                event.preventDefault(); // 阻止默认的滚动行为
                
                const delta = Math.sign(event.deltaY); // 获取滚动方向，正负表示方向
                
                if (delta > 0) {
                  scaleValue -= 0.1; // 缩小
                } else if (delta < 0) {
                  scaleValue += 0.1; // 放大
                }
                
                applyTransform();
              }
               window.addEventListener('wheel', handleWheel,{ passive: false });
            <\/script>
          </body>
        </html>
      `;
      newWindow.document.write(newWindowContent);
      // this.imageStyle.fileImgWidth = row.WIDTH + `px`
      // this.imageStyle.fileImgHeight = row.HEIGHT + `px`
    },
    // 旋转图片
    rotate(type) {
      if (type == 'right') {
        this.deg = this.deg + 90
        this.$refs.imgDiv.style.transform = `rotate(${this.deg}deg)`
      } else {
        this.deg = this.deg - 90
        this.$refs.imgDiv.style.transform = `rotate(${this.deg}deg)`
      }
      console.log(this.deg);
    },
    // 拖动图片
    move(e) {
      e.preventDefault();
      // 获取元素
      var left = document.querySelector(".fileBox");
      var img = document.querySelector(".img");
      // console.log(left,'5');
      // console.log(e,'6');
      var x = e.pageX - img.offsetLeft;
      var y = e.pageY - img.offsetTop;
      // 添加鼠标移动事件
      left.addEventListener("mousemove", move);
      function move(e) {
        img.style.left = e.pageX - x + "px";
        img.style.top = e.pageY - y + "px";
      }
      
      // 添加鼠标按下事件
      img.addEventListener("mousedown", function( ) {});
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", function () {
        left.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      left.addEventListener("mouseout", function () {
        left.removeEventListener("mousemove", move);
      });
    },
      // 缩放图片
    rollImg() {
      /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
 
      var zoom = parseInt(this.$refs.imgDiv.style.zoom) || 100;
      /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
 
      zoom += event.wheelDelta / 12;
      /* 最小范围 和 最大范围 的图片缩放尺度 */
 
      if (zoom >= 50 && zoom < 500) {
        this.$refs.imgDiv.style.zoom = zoom + "%";
      }
      return false;
    },
    // 获取后缀文件类型
    suffix(value) {
      return value.substring(value.lastIndexOf('.')+1)
    },
    // 初始数据
    initData() {
      this.lsh = this.$route.query && this.$route.query.lsh
      this.gethisDetail(this.lsh)
    },
    /** 流程流转记录 */
    handleFlowRecord(row){
      this.$router.push({
        path: '/workflow/process/historydetail',
        query: {
          lsh: row.lsh
        }
      })
    },
    // 打印合同书调用接口
    async getPrintGen() {
      const gen = await getGen({
        lsh:this.lsh
      })
      let url = window.URL.createObjectURL(gen)
      // console.log(url,'ss');
      this.barCode = url
      let dataFiled = this.formData.T_VPN_APPLY 
      if (dataFiled) {
        this.PrintTitle = dataFiled.DLYHMC
        this.PrintName = dataFiled.XTLXQT
        let typeVal = dataFiled.XTLX.split(',').filter(Boolean)
        let newVal 
        // console.log(typeVal, '4');
      // console.log(this.PrintName, 'mingzi');
        if (typeVal.length > 1) {
          if (this.PrintName) {
            newVal = '0'
          } else {
            newVal = '1'
          }
          
        } else {
          newVal = typeVal.toString()
        }
        if (newVal == '0') {
        // 格式化名字
       let glXTName = dataFiled.XTLXQT.trim().replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
        let list100 = this.ratesList100.map(item => {
          return item.trim().replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
        })
        let list200 = this.ratesList200.map(item => {
          return item.trim().replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
        })
        let list300 = this.ratesList300.map(item => {
          return item.trim().replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
        })
        if (list100.includes(glXTName)) {
          this.price = 100
        } else if (list200.includes(glXTName)) {
          this.price = 200
        } else if(list300.includes(glXTName)) {
          this.price = 300
        }
      } else if (newVal == '1') {
        this.PrintName = '单一窗口报关单申报系统'
        this.price = 300
      }
      }
      
      // console.log(this.price,'jiage');
      // console.log(this.PrintTitle,'888888');
    },
    // 标签页切换
    handleClick(tab, event) {
      if (tab.label == "企业历史列表") {
        this.getQYhisList()
      }
      if (tab.label == '关联系统信息') {
        this.getGldetail()
      }
      if (tab.label == '查看已上传') {
        console.log(this.fileList,'附件');
        const fileinfo = this.fileList[0]
      //  this.imgURL = fileinfo.FILECONTENT
       this.imageStyle.fileImgWidth = fileinfo.WIDTH + `px`
       this.imageStyle.fileImgHeight = fileinfo.HEIGHT + `px`
      }
      if (tab.label == '打印合同书') {
        this.getPrintGen()
      }
        
    },
    // 调用关联信息详情
    async getGldetail() {
      const glres = await glDetail({ glid: this.record.GLID })
      if (glres.code == 200) {
        const glData = glres.data
        this.glformData = glData.formData
        this.glrecord = glData.record
        this.glformType = glData.record.SQBLX
        this.glprojectName = glData.record.XMMC
        // if (JSON.stringify(this.glformData) != "{}" && JSON.stringify(this.glrecord) != "{}") {
          this.glShowForm = true
        // }
        
      }
      
      },
    // 详情接口调用
    async gethisDetail(lsh) {
      this.formLoading = true
      const res = await historydetailData({ lsh: lsh })
      if (res.code == 200) {
        const data = res.data
        // 表格数据
        this.formData = data.formData
        // this.formCode = data.formData
        // 列表基本信息
        this.record = data.record
        // 上传的附件
        this.fileList = data.fileData
        // 表单类型
        this.formType = data.record.SQBLX
        // 流程ID
        this.queryParamsHistory.id = data.record.ID
        // 审核记录
        this.checkList = data.flow
        // 业务处理信息
        this.deal = data.deal
        // 外部回复信息
        this.revertForm = data.revert
        if (data.revert) {
          // 用于VPN显示用户邮箱
        if (data.record.XMMC == 'VPN接入申请' && data.formData.T_VPN_APPLY != null) {
          this.revertForm.YHYX = data.formData.T_VPN_APPLY.EMAIL
        }
        // 用于外部回复的备注
        if (data.deal.data != null && data.deal.data.length > 0) {
          this.revertForm.WBBZ = data.deal.data[0].NAME + "：" + data.deal.data[0].VALUE
          // 判断是否显示派工单信息（业务回复信息是否为备注意见）
          data.deal.data.forEach(item => {
            if (item.NAME == '备注意见' || item.NAME == '备注') {
              this.PDshow = true
              // 派单备注
              this.pdBZ = item.VALUE
            } else {
              this.PDshow = false
            }
          });

        }
        }
        
        // 解决部分输入框输入或修改时不改变问题（暂时未使用修改功能）
        // this.revertForm = JSON.parse(JSON.stringify(this.revertForm))
        // 分中心处理意见
        this.dealFzx = data.dealFzx
        // 项目名称
        this.projectName = data.record.XMMC
        // 是否显示表单模板
        this.showForm = true
        this.formLoading = false
      }
     
    },
    // 企业历史申请列表
    async getQYhisList() {
      const res = await getCompanyList(this.queryParamsHistory)
      this.QYhsiList = res.data.list
      this.totalHistory = res.data.total
      this.historyLoading = false
    },
    // 返回按钮
    returnGo() {
      this.$router.back(-1)
    },
  }
}
</script>
<style lang="scss" scoped>
.topBtn {
  display: flex; 
  justify-content:flex-end;
  margin-bottom: 20px;
}
.textCZ {
  margin-right: 10px;
}
.fileBox {
  // text-align: center;
  position: relative;
  width: 100%;
  // height: 100%;
  min-height: 400px; 
  border: 1px solid saddlebrown ;
  overflow: hidden;
}
.img {
    position: absolute;
    transform-origin: center;
    transition: transform 0.3s ease;
    cursor:grab
  } 
.fileBtn {
  text-align: center;
  margin-bottom: 5px;
}
#printBox {
  padding: 0 30px;
  .test_p {
    text-indent: 2em;
    color: #000;
    font-size: 15px;
  }
  .bottom_qianzhang {
    display: flex;
    justify-content: space-around;
  }
}
.Print_title {
  color: #000;
  h2 {
    margin: 0 ;
    font-weight: 700;
    text-align: center;
  }
  p {
    margin-bottom: 30px;
  }
  
}
.readonly-radio-group {
  pointer-events: none; /* 禁止鼠标事件，使其无法交互 */
  // opacity: 0.6; /* 降低透明度，使其看起来不可用 */
}
</style>